<script lang="ts" setup>
import { OrderStatus } from '@/constants/orders';
import { RouteMap, useRouter } from '@/router';
import { useLocale } from '@/locale/locale';
import { computed, onMounted, ref, watch } from 'vue';

const { t } = useLocale();
const router = useRouter();

const props = defineProps<{
  index: number;
  orderSn: string;
  type: number;
  status: string;
  refundStatus: string;
  countdown: number;
  name: string;
  orderAmount: number;
  paymentAmount: number;
  address: string;
  checkInDate: string;
  checkOutDate: string;
  days: number;
  roomNum: number;
  person: number;
  createdAt: string;
}>();

const orderStatus = ref('');

const tag = computed(() => {
  if (props.type === 1) {
    return t('OrderListHomestay');
  } else if (props.type === 2) {
    return t('OrderListRestaurant');
  } else if (props.type === 3) {
    return t('OrderListTransfer');
  } else {
    return t('Spa');
  }
});

defineEmits(['cancel']);

function handleCountDownEnd() {
  orderStatus.value = OrderStatus.CANCEL;
}

watch(
  () => props.status,
  (newVal, oldVal) => {
    orderStatus.value = newVal;
  }
);

onMounted(() => {
  orderStatus.value = props.status;
});
</script>

<template>
  <view class="order-card">
    <view @click="router.to(RouteMap.orderDetails, { orderSn })">
      <view class="flex justify-between items-center mb-2">
        <text class="text-sm text-primary font-medium">{{ tag }}</text>
        <view class="flex justify-end items-center flex-1">
          <apt-count-down
            v-if="status === OrderStatus.WAIT_PAY"
            :countdown="countdown"
            @end="handleCountDownEnd"
          />
          <text v-else-if="status === OrderStatus.HAVE_PAID" class="text-sm text-primary">
            {{ t('LOKey_orderReservationSuccess') }}
          </text>
          <template v-else>
            <text class="text-sm text-fourth">{{ t('LOKey_orderCancel') }}</text>
          </template>
        </view>
      </view>
      <view class="text-lg text-primary font-medium mb-1">{{ name }}</view>
      <view class="text-sm text-fourth mb-1">
        {{ address }}
      </view>
      <view class="text-sm text-fourth mb-1">
        {{ checkInDate }} ~ {{ checkOutDate }} ·
        {{ t('LHTKey_nightRoom', { night: days, room: roomNum }) }} ·
        {{ t('LHTKey_hotelPerson', { person }) }}
      </view>
      <view class="flex justify-end items-baseline mt-2_5">
        <template v-if="status === OrderStatus.WAIT_PAY">
          <text class="text-sm text-primary">{{ t('LOKey_shouldPay') }}</text>
          <text class="text-lg text-primary font-medium">
            {{ t('LPKey_moneyX', { money: paymentAmount }) }}
          </text>
        </template>
        <template v-else>
          <text class="text-sm text-primary">{{ t('LOKey_orderAmount') }}</text>
          <text class="text-lg text-primary font-medium">
            {{ t('LPKey_moneyX', { money: orderAmount }) }}
          </text>
        </template>
      </view>
    </view>
    <view v-if="status === OrderStatus.WAIT_PAY" class="mt-2_5 flex justify-end items-center">
      <uv-button
        :text="t('LOKey_cancelReservation')"
        size="small"
        @click.stop="$emit('cancel', orderSn)"
      />
      <uv-button
        :text="t('LRKey_payNow')"
        custom-style="margin-left: 20rpx; background: #269C74"
        size="small"
        type="primary"
        @click.stop="
          router.to(RouteMap.payment, {
            id: orderSn,
            countdown: Math.abs(countdown),
            amount: orderAmount,
            createTime: createdAt,
            from: 'checkout',
            isFromOrder: true,
            orderIndex: index
          })
        "
      />
    </view>
    <view v-else-if="status === OrderStatus.HAVE_PAID" class="mt-2_5 flex justify-end items-center">
      <uv-button
        :text="t('tripCancelOrder')"
        size="small"
        @click.stop="
          router.to(RouteMap.orderRefundDetails, {
            orderSn,
            status: refundStatus
          })
        "
      />
      <uv-button
        :text="t('LKey_onlineService')"
        custom-style="margin-left: 20rpx"
        size="small"
        @click.stop="router.to(RouteMap.cs)"
      />
    </view>
    <view v-else class="mt-2_5 flex justify-end items-center">
      <uv-button
        :text="t('DiningPreOrderBookAgain')"
        size="small"
        @click.stop="router.to(RouteMap.home)"
      />
    </view>
  </view>
</template>

<style lang="scss">
.order-card {
  width: 702rpx;
  padding: 32rpx;
  background-color: #fff;
  border-radius: 16rpx;

  &__count-down {
    padding: 0 16rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    background: #fde2b2;
    border-radius: 4rpx;
    color: #b84c16;
  }
}
</style>
